<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="keywords" content="shopping">
    <meta name="description" content="shopping">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
    <title>shopping</title>
    <link rel="stylesheet" href="./css/public.css">
    <link rel="stylesheet" href="./css/setevaluation.css">
    <link rel="stylesheet" href="//at.alicdn.com/t/font_745333_g55zsfjlolf.css">

</head>

<body>
    <!-- 公共头部 -->
    <div class="contentHead">
        <div class="head">
            <div class="iconfont">
                <a href="#" class="icon pd-x_user"></a>
                <a href="#" class="icon pd-x_qrcode"></a>
                <a href="#" class="icon pd-x_phone"></a>
                <a href="#" class="icon pd-x_help"></a>
            </div>
            <div class="tel">
                <span class="icon pd-x_service"></span>
                <span class="server">服务热线</span>
                <span class="phone">400-1234-5678</span>
            </div>
        </div>
    </div>
    <!-- 头部搜索 -->
    <div class="search">
        <div class="logo">
            <img src="./images/logarea.png" alt="">
        </div>
        <div class="searchinfo">
            <div class="searchbox">
                <p>全部分类</p>
                <div class="line"></div>
                <input type="text" name="" id="" placeholder="搜索商品">
                <div class="right">
                    <span class="icon pd-search_line"></span>
                    <span class="sousuo">搜索</span>
                </div>
            </div>
        </div>
        <div class="myshop">
            <div class="bg">
                <span class="icon pd-x_cart"></span>
            </div>
            <div class="my">
                <p class="shop">我的购物车
                    <span class="icon pd-baseicons82"></span>
                </p>
                <p class="pirce">￥ 0.00</p>
            </div>
        </div>
    </div>
    <!-- nav -->
    <div class="navT">
        <div class="nav">
            <img src="./images/nav1.png" alt="">
            <div class="navAll">
                <a href="#" style="padding-left: 72px" class="active">首页</a>
                <a href="#">限时秒杀</a>
                <a href="#">商品促销</a>
                <a href="#">关于我们</a>
                <a href="#">联系我们</a>
            </div>
        </div>
    </div>

    <!-- 内容 -->
    <div class="cont">
        <!-- 左边头像个人导航 -->
        <div class="personal">
            <div class="personalTop">
                <img src="./images/head.png" alt="">
                <p class="welcome">欢迎回来，</p>
                <p class="name">牛小叉</p>
            </div>
            <div class="personalBottom">
                <ul>
                    <li style="padding-top: 0" class="active">
                        <span class="line"></span>
                        <span class="icon pd-member_solid"></span>
                        <a href="#">会员中心</a>
                    </li>
                    <li>
                        <span class="icon pd-member_solid"></span>
                        <a href="#">个人资料</a>
                    </li>
                    <li>
                        <span class="icon pd-member_solid"></span>
                        <a href="#">账户安全</a>
                    </li>
                    <li>
                        <span class="icon pd-member_solid"></span>
                        <a href="#">收货地址</a>
                    </li>
                    <li>
                        <span class="icon pd-member_solid"></span>
                        <a href="#">账户余额</a>
                    </li>
                    <li>
                        <span class="icon pd-member_solid"></span>
                        <a href="#">提现记录 </a>
                    </li>
                    <li>
                        <span class="icon pd-member_solid"></span>
                        <a href="#">我的优惠券</a>
                    </li>
                    <li>
                        <span class="icon pd-member_solid"></span>
                        <a href="#">我的积分</a>
                    </li>
                    <li>
                        <span class="icon pd-member_solid"></span>
                        <a href="#">我的订单</a>
                    </li>
                    <li>
                        <span class="icon pd-member_solid"></span>
                        <a href="#">退款/退货及维修</a>
                    </li>
                    <li>
                        <span class="icon pd-member_solid"></span>
                        <a href="#">商品评价/晒单</a>
                    </li>
                    <li>
                        <span class="icon pd-member_solid"></span>
                        <a href="#">商品收藏</a>
                    </li>
                </ul>
            </div>

        </div>
        <!-- 右边具体内容 -->
        <div class="evaluation center">
          <div class="evaluation-top">
            <h2>对购买的商品评价</h2>
            <p>评价信息最多填写150字，请您根据本次交易，给予真实、客观地评价；您的评价将是其他会员的参考。。</p>
            <p>店铺动态评分默认为“5”分，您可以根据本次交易情况给予商家评分， 一旦提交后不能修改。。</p>
          </div>
          <div class="evaluation-center">
            <div class="e-title">
              <div class="e-t-l">商品信息</div>
              <div class="e-t-r">评价</div>
            </div>
            <form action="" method="post">
              <div class="e-content">
                <div class="e-c-l">
                  <a class="c-l-img" href="#">
                    <img src="" alt="">
                  </a>
                  <a class="c-l-title" href="#">是其他会员的参考。。店铺动态评分默认为“5”分，您可以根据本次交易情况给予商家评分， 一旦提交后不能修改。。</a>
                </div>
                <div class="e-c-r">
                  <p class="c-r-star">评分: 
                    <span id="star">
                      <i class="bright icon pd-star_solid"></i>
                      <i class="icon pd-star_line"></i>
                      <i class="icon pd-star_line"></i>
                      <i class="icon pd-star_line"></i>
                      <i class="icon pd-star_line"></i>
                    </span>
                  </p>
                  <textarea class="c-r-input" name="" id="" placeholder="请输入要评价的内容，不要超过150个字符。"></textarea>
                  <ul id="c-r-img" class="c-r-img">
                    <li class="up" onclick="myFile.click()"><i class="icon pd-shangchuan"></i></li>
                    <input type="file" hidden id="myFile" />
                  </ul>
                  <div class="c-r-check">
                    <input type="checkbox" name="noname" id="noname">
                    <label for="noname">匿名评价</label>
                  </div>
                </div>
              </div>
              <button class="submitbtn">提交</button>
            </form>
          </div>
        </div>
    </div>
    </div>
    <!-- 正品保障 -->
    <div class="real">
        <div class="realThing">
            <div class="realThingCont">
                <span class="icon pd-real_solid"></span>
                <span>正品保障</span>
            </div>
            <div class="realThingCont">
                <span class="icon pd-real_solid"></span>
                <span>正品保障</span>
            </div>
            <div class="realThingCont">
                <span class="icon pd-real_solid"></span>
                <span>正品保障</span>
            </div>
            <div class="realThingCont">
                <span class="icon pd-real_solid"></span>
                <span>正品保障</span>
            </div>
        </div>
    </div>
    <!-- 公共底部 -->
    <div class="footer">
        <div class="footerTop">
            <div>
                <img src="./images/LOGO.png" alt="">
            </div>
            <div class="">
                <dl>
                    <dt>配送与支付</dt>
                    <dd>货到付款区域</dd>
                    <dd>配送支付智能查询</dd>
                    <dd>支付方式说明</dd>
                </dl>
            </div>
            <div class="">
                <dl>
                    <dt>服务保证</dt>
                    <dd>退换货原则</dd>
                    <dd>售后服务保证</dd>
                    <dd>产品质量保证</dd>
                </dl>
            </div>
            <div class="">
                <dl>
                    <dt>联系我们</dt>
                    <dd>网站故障报告</dd>
                    <dd>选机咨询</dd>
                    <dd>投诉与建议</dd>
                </dl>
            </div>
            <div class="fuwu">
                <dl>
                    <dt>服务热线</dt>
                    <dd>400-023-4567</dd>
                </dl>
            </div>
        </div>
        <div class="line"></div>
        <div class="footerBottom">
            <p>© 2018 WWW.SHOPPING.COM</p>
        </div>
    </div>
</body>
<script src="./js/jquery.1.8.2.min.js"></script>
<script>

    // 星星事件
    // 鼠标移入
    $("#star i").mouseenter(function(){
      $("#star i").removeClass("pd-star_solid").addClass("pd-star_line")
      $(this).removeClass("pd-star_line").addClass("pd-star_solid")
        .prevAll().removeClass("pd-star_line").addClass("pd-star_solid")
    })
    // 鼠标移出
    $("#star i").mouseleave(function(){
      $("#star i").removeClass("pd-star_solid").addClass("pd-star_line")
      $("#star .bright").removeClass("pd-star_line").addClass("pd-star_solid")
        .prevAll().removeClass("pd-star_line").addClass("pd-star_solid")
    })
    // 鼠标点击
    $("#star i").click(function(){
      $("#star i").removeClass("bright")
      $(this).addClass("bright")
    })

    //获取图片路劲的方法，兼容多种浏览器，通过createObjectURL实现
    function getObjectURL(file) {
        var url = null;
        if (window.createObjectURL != undefined) {
            url = window.createObjectURL(file); //basic
        } else if (window.URL != undefined) {
            url = window.URL.createObjectURL(file);
        } else if (window.webkitURL != undefined) {
            url = window.webkitURL.createObjectURL(file);
        }

        return url;
    }

    //实现功能代码
    $(function () {
        $("#myFile").change(onchange)
        function onchange () {
          var objUrl = getObjectURL(this.files[0]);
          if (objUrl) {
            var li = $("#c-r-img").html()
            $("#c-r-img")[0].innerHTML = '<li><img src="' + objUrl + '" alt=""></li>' + li;
            $("#myFile").change(onchange)
          }
        }
    })
</script>

</html>